<template>
    <div class="common-layout">
        <el-container>
            <el-header style="height: 35px">
                <span class="title">
                    <el-icon>
                        <House />
                    </el-icon>
                    DD接单/<span style="color: #0098FF;">接单管理</span></span>
            </el-header>
            <el-main>
                <div class="main">
                    <div style="float: left;margin-left: 5px">
                        <!-- <el-button type="primary">开单</el-button>
                        <el-button plain>批量操作</el-button>
                        <el-button plain>导入</el-button>
                        <el-button plain>导出</el-button>
                        <el-button plain>打印</el-button> -->
                    </div>
                    <div style="margin-top: 15px;float: left;margin-left: 5px">
                        订单类型:&nbsp;&nbsp;
                        <el-select v-model="ddlx" placeholder="请选择" style="width: 240px">
                            <el-option v-for="item in DDLX" :key="item.dict_value" :label="item.dict_label"
                                :value="item.dict_value" />
                        </el-select>
                        &nbsp;&nbsp;始发地:&nbsp;&nbsp;
                        <el-cascader v-model="sfd" :options="options2" />
                        &nbsp;&nbsp;目的地:&nbsp;&nbsp;
                        <el-select v-model="mdd" placeholder="请选择" style="width: 240px">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select><br />
                        <p style="float: left;margin-left: 0px;margin-top: 15px;">
                            下单日期:&nbsp;&nbsp;
                            <el-date-picker v-model="xsrq" type="daterange" range-separator="To"
                                start-placeholder="Start date" end-placeholder="End date" :size="size" />
                            <el-input v-model="ss" style="width: 240px;margin-left: 10px;" placeholder="请输入关键字搜索"
                                :prefix-icon="Search" />&nbsp;&nbsp;
                            <el-button type="primary">搜索</el-button>
                            <el-button plain @click="CZ">重置</el-button>
                        </p>
                    </div>
                    <div style="float: left;margin-left: 5px" class="table_div">
                        <el-table :data="tableData" style="width: 1200px;height: 410px;">
                            <el-table-column type="selection" width="55" />
                            <el-table-column property="ord_id" label="订单id" width="120" />
                            <el-table-column property="ord_number" label="订单号" width="120" />
                            <el-table-column property="name" label="关联运单号" width="120" />
                            <el-table-column property="ord_startaddress" label="始发地" width="120" />
                            <el-table-column property="ord_destination" label="目的地" width="120" />
                            <el-table-column property="client_name" label="客户名称" width="120" />
                            <el-table-column property="ord_state" label="订单状态" width="120" />
                            <el-table-column property="shipments_Contactname" label="发货人姓名" width="120" />
                            <el-table-column property="shipments_ContactPhone" label="发货人电话" width="120" />
                            <el-table-column property="shipments_addres" label="发货地址" width="120" />
                            <el-table-column property="receiving_Contactname" label="收货人姓名" width="120" />
                            <el-table-column property="receiving_ContactPhone" label="收货人电话" width="120" />
                            <el-table-column property="receiving_addres" label="收货地址" width="120" />
                            <el-table-column property="shipping_time" label="预计发货时间" width="120" />
                            <el-table-column property="receiving_time" label="预计收货时间" width="120" />
                            <el-table-column property="ord_type" label="订单类型" width="120" />
                            <el-table-column property="ord_source" label="货物类型" width="120" />
                            <el-table-column property="ord_remark" label="货物数量" width="120" />
                            <el-table-column property="totalvolume" label="总体积" width="120" />
                            <el-table-column property="weight" label="总重量" width="120" />
                            <el-table-column property="freight_count" label="运费合计" width="120" />
                            <el-table-column property="ord_source" label="订单来源" width="120" />
                            <el-table-column property="ord_remark" label="订单备注" width="120" />
                            <el-table-column property="ord_time" label="下单时间" width="120" />
                            <el-table-column property="create_by" label="创建人" width="120" />
                            <el-table-column property="create_time" label="创建时间" width="120" />
                            <el-table-column label="操作" width="120">
                                <template #default="scoped">
                                    <el-button link type="primary" size="small" @click="JD(scoped.row.ord_id)">
                                        接单
                                    </el-button>
                                    <el-button link type="primary" size="small" @click="TH(scoped.row)">
                                        提货
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <el-pagination style="float: right;margin-top: 10px;" v-model:current-page="currentPage"
                        v-model:page-size="PageSize" :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled"
                        :background="background" layout="total, sizes, prev, pager, next, jumper" :total="count"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { ref, reactive } from 'vue'
import axios from 'axios';
import { Search } from '@element-plus/icons-vue'
import $http from '@/axios/base.js';
//import { ta } from 'element-plus/es/locale';
export default {
    setup() {
        let ddlx = ref('');   //订单状态的值
        let sfd = ref('');   //始发地的值
        let mdd = ref('');   //目的地的值
        let xsrq = ref('');   //下单时间的值
        let ss = ref('');  //搜索框的值
        let currentPage = ref(1);
        let PageSize = ref(10);
        let tableData = ref([]);
        let count = ref();   //订单总数
        let DDLX = ref([]);   //订单类型
        let ord_id=ref();
        let ord_number=ref('');

        const background = ref(false);
        const disabled = ref(false);

        const options = [
            {
                value: 'Option1',
                label: 'Option1',
            },
            {
                value: 'Option2',
                label: 'Option2',
            }
        ]

        const options2 = [
            {
                value: 'guide',
                label: 'Guide',
                children: [
                    {
                        value: 'disciplines',
                        label: 'Disciplines',
                        children: [
                            {
                                value: 'consistency',
                                label: 'Consistency',
                            },
                            {
                                value: 'feedback',
                                label: 'Feedback',
                            },
                            {
                                value: 'efficiency',
                                label: 'Efficiency',
                            },
                            {
                                value: 'controllability',
                                label: 'Controllability',
                            },
                        ],
                    },
                ]
            }
        ]

        function show() {
            axios.get("http://localhost:5261/api/Order/GetOrders?currentPage=" + currentPage.value + "&PageSize=" + PageSize.value).then((res) => {
                tableData.value = res.data;
            }).catch((err) => {
                console.log("错误：" + err)
            })
        }
        show();
        function OrderCount() {
           $http.get(`http://localhost:5261/api/Order/Count`).then((res) => {
                count.value = res;
            }).catch((err) => {
                console.log("错误：" + err);
            })
        }
        OrderCount();

        function handleSizeChange(val) {
            PageSize.value = val;
            //console.log(PageSize.value);
            show();
        }

        function handleCurrentChange(val) {
            currentPage.value = val;
            //alert(currentPage.value);
            show();
        }

        function DDLXShow() {
            $http.get(`http://localhost:5261/api/Order/GetSys_Dict_Datas`).then((res) => {
                DDLX.value = res;
            }).catch((err) => {
                console.log("错误：" + err)
            })
        }
        DDLXShow();

        function JD(id) {
           $http.put(`http://localhost:5261/api/Order/JD/${id}`).then((res) => {
            alert('已接单');
            }).catch((err) => {
                console.log("错误：" + err)
            })
        }

        function TH(row) {
            console.log(row);
           $http.put(`http://localhost:5261/api/Order/TH/${row.ord_id}`).then((res) => {
            alert('已提货');
            THZT(row.ord_number);
            }).catch((err) => {
                console.log("错误：" + err)
            })
        }


        function THZT(ord_number){
                $http.put(`http://localhost:5261/api/Bill_ol/THZT/${ord_number}`).then((res)=>{
                    console.log('成功');
                }).catch((err)=>{
                    console.log("错误："+err)
                })
            }

        function FC(id) {
           $http.put(`http://localhost:5261/api/Order/FC/${id}`).then((res) => {
            alert('已发车');
            }).catch((err) => {
                console.log("错误：" + err)
            })
        }


        function DZ(id) {
           $http.put(`http://localhost:5261/api/Order/DZ/${id}`).then((res) => {
            alert('已到站');
            }).catch((err) => {
                console.log("错误：" + err)
            })
        }

        function CZ() {
            ddlx.value = "";
            sfd.value = "";
            mdd.value = "";
            xsrq.value = "";
            ss.value = "";
        }
        return {
            ddlx,
            sfd,
            mdd,
            xsrq,
            ss,
            Search,
            CZ,
            options,
            tableData,
            currentPage,
            PageSize,
            count,
            handleSizeChange,
            handleCurrentChange,
            background,
            disabled,
            DDLX,
            options2,
            JD,
            TH,
            FC,
            DZ,
            THZT,
            ord_id,
            ord_number
        }
    }
}
</script>

<style scoped>
.el-header {
    padding-top: 20px;
    /* background-color: #00ff00; */
}

/* .el-main {
    background-color: #00E5EE;
} */

.main {
    margin-left: 25px;

}

.common-layout {
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
    background-color: #F5F9FF;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
}

.span {
    height: 1500px;
}

.title {
    padding-right: 1060px;
}

.table_div {
    margin-top: 15px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}
</style>